let form = layui.form;

function render() {
    $.ajax({
        url: 'admin/links',
        success: function(res) {
            let html = template('tpl-list', res)
            $('.tbody').html(html)
        },
        headers: {
            Authorization: localStorage.getItem('mytoken')
        }
    })
}
render()
    // -----------------------------添加按钮-----------------------
$('.layui-btn-normal').on('click', function() {
        let index = layer.open({
            type: 1,
            title: '添加',
            area: ['500px', '400px'],
            closeBtn: 2,
            shade: [0.8, '#393D49'],
            shadeClose: true,
            anim: 6,
            content: $('#tpl-lianjie').html()
        });
        // 点击按钮触发input:file
        $('.upload').click(function() {
            $('.pic').click()
        });
        // 给图片设置预览
        $('.pic').change(function(e) {
            let picUrl = URL.createObjectURL(e.target.files[0])
            $('.imgs').attr('src', picUrl)
        });
        // 确定按钮提交
        $('.sure').click(function(e) {
            e.preventDefault()
            let data = new FormData(document.querySelector('.fd'))
                // data.forEach((value, key) => {
                //         console.log(value, key);
                //     })
            $.ajax({
                type: 'post',
                url: 'admin/links',
                data: data,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.status === 0) {
                        layer.msg(res.message)
                        layer.close(index);
                        render()
                    }
                }
            });
        });
        // 清空输入框的值
        $('.reset').click(function(e) {
            e.preventDefault()
            $('.fd')[0].reset()
        })
    })
    // -----------------------------编辑按钮-----------------------
$('.layui-table tbody').on('click', '.edit', function(e) {
        // 数据回填
        let id = $(e.target).data('id');
        $.ajax({
            url: 'admin/links/' + id,
            success: function(res) {
                let index = layer.open({
                    type: 1,
                    title: '编辑友情链接',
                    content: $('#tpl-bianji').html(),
                    area: ['500px', '400px']
                });
                // 图片回填
                $('.editimgs').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon);
                // 删除图片文件
                delete res.data.linkicon;
                form.val('editForm', res.data);
                // 点击按钮触发input:file
                $('.upload').click(function() {
                    $('.pic').click()
                });
                //设置图片预览
                let file = null
                $('.pic').change(function(e) {
                    let picUrl = URL.createObjectURL(e.target.files[0]);
                    file = e.target.files[0];
                    $('.editimgs').attr('src', picUrl);
                });
                // 点击确定提交数据
                $('.sure').click(function(e) {
                    e.preventDefault()
                    let data = new FormData(document.querySelector('.editfd'))
                        // if (file) {
                        //     data.append('linkicon', file)
                        // }
                    $.ajax({
                        type: 'put',
                        url: 'admin/links/' + id,
                        data: data,
                        contentType: false,
                        processData: false,
                        success: function(res) {
                            if (res.status === 0) {
                                layer.msg(res.message)
                                layer.close(index);
                                render()
                            }
                        }
                    });
                });
                $('.reset').click(function(e) {
                    e.preventDefault();
                    $('.editfd')[0].reset();
                })
            }
        })
    })
    // -----------------------------删除按钮-----------------------
$('.layui-table tbody').on('click', '.delete', function(e) {
    let id = $(e.target).data('id');
    layer.confirm('你确定删除吗?', { icon: 3, title: '提示' }, function(index) {
        $.ajax({
            type: 'delete',
            url: 'admin/links/' + id,
            success: function(res) {
                if (res.status === 0) {
                    layer.close(index);
                    render()
                }
            }
        });

    })
})